<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.html">
<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">

<dom-module id="cr-demo-element">
  <link rel="import" type="css" href="demo_element.css">
  <template>
    <cr-expand-button toggles expanded="{{networkOpened}}">
      <span class="heading">cr-network-*</span>
    </cr-expand-button>
    <iron-collapse opened="[[networkOpened]]">
      <div class="layout vertical">
        <h3>cr-network-icon</h3>
        <div class="layout vertical">
          <div class="layout horizontal center">
            <cr-network-icon id="ethernet" network-type="Ethernet">
            </cr-network-icon>
            <span>Ethernet</span>
          </div>
          <div class="layout horizontal center">
            <cr-network-icon id="wifi" network-type="WiFi"></cr-network-icon>
            <span>WiFi (32px)</span>
          </div>
          <div class="layout horizontal center">
            <cr-network-icon id="cellular" network-type="Cellular">
            </cr-network-icon>
            <span>Cellular (16px)</span>
          </div>
        </div>
      </div>
    </iron-collapse>

  </template>
  <script src="demo_element.js"></script>
</dom-module>
